<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>

<template id="oneMenu">
    <div>
        <h1><router-link to="/two">懂事处</router-link></h1>
        <router-view></router-view>
    </div>
</template>
<template id="towMenu">
    <div>
        <h2>
            <router-link to="/three">秘书处</router-link>
        </h2>
        <router-view></router-view>
    </div>
</template>
<template id="threeMenu">
    <div>
        <ul>
            <router-link to="/three">项目部</router-link>
            <router-link to="/three">宣传部</router-link>
            <router-link to="/three">综合部</router-link>
            <router-link to="/three">财务部</router-link>
        </ul>
    </div>
</template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    import {} from './js/vue-router.js'

    // 定义菜单组件
    let oneMenu = {template: '#oneMenu'}
    let towMenu = {template: '#towMenu'}
    let threeMenu = {template: '#threeMenu'}

    //定义路由
    const routes = [
        {path: '/', redirect: '/one'},
        {
            path: '/one', component: oneMenu,
            children: [
                {
                    path: '/two', component: towMenu
                    , children: [
                        {path: '/three', component: threeMenu}
                    ]
                }
            ]

        }
    ]

    // 创建路由
    const router = new VueRouter({
        routes
    })

    new Vue({
        el: '#app',
        data: {},
        router
    })
</script>